<template>
  <div class="adeHistory">
    <div class="adeHistory-title">员工考勤历史记录查询</div>
    <div class="block">
      <span class="demonstration">输入时间段：</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <el-radio-group v-model="radio1" class="ml-4">
        <el-radio label="1" size="large">本日</el-radio>
        <el-radio label="2" size="large">本周</el-radio>
        <el-radio label="3" size="large">本月</el-radio>
      </el-radio-group>
    </div>
    <hr>
    <div>
      <span>查询范围：</span>
      <el-radio-group v-model="radio2" class="ml-4">
        <el-checkbox v-model="checked1" label="按机构" size="large" />
        <el-checkbox v-model="checked2" label="按部门" size="large" />
        <el-checkbox v-model="checked3" label="按员工号" size="large" />
        <el-checkbox v-model="checked4" label="按姓名" size="large" />
      </el-radio-group>
    </div>
    <hr>
    <div>
       <span>机构：</span>
        <el-select v-model="value2" placeholder="请选择">
            <el-option
            v-for="item in cities"
            :key="item.value"
            :value="item.value"
            >
            <span style="float: left">{{ item.value }}</span>
            </el-option>
        </el-select>
        <span>部门：</span>
        <el-select v-model="value3" disabled="false" placeholder="请选择">
            <el-option
            v-for="item in cities"
            :key="item.value"
            :value="item.value"
            >
            <span style="float: left">{{ item.value }}</span>
            </el-option>
        </el-select>
        <span>员工号：</span>
        <input>
        <span>姓名：</span>
        <input>
        <!-- 获取 -->
        <div class="search"><el-button type="warning" @click="handleHistory">搜索</el-button></div>
    </div>
    <!-- 子组件渲染历史记录 -->
    <AdeHistoryList v-show="active"></AdeHistoryList>
  </div>
</template>

<script setup>
import {ref,defineComponent,watch} from 'vue'
import AdeHistoryList from './adeList/AdeHistoryList.vue'
const value1=ref('')
const radio1 = ref('')
const radio2 = ref('')
const checked2=ref(false)
const disabled = ref(false)
const active = ref(false)

watch(checked2,()=>{
  if(checked2.value==true){
    disabled.value=true
  }
})

function handleHistory(){
  active.value=true
}
</script>

<style scoped>
.adeHistory-title{
      height:40px;
       width:100%;
       text-align:center;
}
.block{
    
}
.search{
  height:40px;
       width:100%;
       text-align:center;
}
</style>
